<template>
  <div class="tags">
    <el-tag v-for="item in userMsg.visitedRoutes"
            :key="item.name"
            :closable="item.name != '主页'"
            :disable-transitions="false"
            @close="closeTag(item.name)"
            @click="goToRoute(item.path)"
            style="margin-left: 10px;margin-top: 5px; cursor: pointer"

    >
      {{ item.name }}
    </el-tag>
  </div>
</template>

<script setup>
import {useRouter, useRoute} from 'vue-router'
import { useRouteStore } from '../../store/route.js'
import { onMounted} from "vue";

const userMsg = useRouteStore();
//全局路由
const router = useRouter();
//当前活跃的路由
const route = useRoute();
onMounted(()=>{
  console.log(userMsg.visitedRoutes);
})

//关闭标签页
const closeTag = (name)=>{
  if(name == '主页'){
    return
  }else{
    userMsg.deleteTAb(name);
    if(route.meta.title == name){
      let routeLength = userMsg.visitedRoutes.length;
      if(userMsg.visitedRoutes && routeLength >= 1 ){
        router.push(userMsg.visitedRoutes[routeLength-1].path);
      }
    }

  }
}

//点击标签页
const goToRoute = (path)=>{
  router.push(path);
}

</script>

<style scoped>
</style>
